<template>
    <div class="block">
        <el-date-picker
            v-model="msg.dateStart"
            type="date"
            placeholder="开始时间"
            format="yyyy 年 MM 月 dd日"
            value-format="yyyy-MM-dd"
            :picker-options="startDatePicker"
            @change="startChange">
        </el-date-picker>
        -
        <el-date-picker
            v-model="msg.dateEnd"
            type="date"
            placeholder="结束时间"
            format="yyyy 年 MM 月 dd日"
            value-format="yyyy-MM-dd"
            :picker-options="endDatePicker"
            @change="endChange">
        </el-date-picker>
    </div>
</template>
<script>
export default {
    props:[
        'msg'
    ],
    data(){
        return {
            startDatePicker:this.beginDate(),
            endDatePicker:this.processDate()
        }
    },
    methods:{
        startChange(val){
            this.msg.dateStart = val
            this.msg.dateEnd = ''
            console.log(this.msg.dateStart)
        },
        endChange(val){
            this.msg.dateEnd = val
            console.log(this.msg.dateEnd)
        },
        beginDate(){
            return {
                disabledDate(time){
                    return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                }
            }
        },
        processDate(){
            let self = this
            return {
                disabledDate(time){
                    if(self.msg.dateStart){
                        return new Date(self.msg.dateStart).getTime() > time.getTime() || time.getTime() > Date.now()
                    }else{
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                }
            }
        }
    }
}
</script>

<style scoped>

</style>
